<template>
  <div id="big_box">
    <ul id="left_router">
      <li @click="toggleClass(1)" :class="{'active':1==current}">
        <router-link :to="{path: '/Index',name:'Index',params:{indexs:1}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon shouye"></i></div>
          <span class="router_title">首页</span>
        </router-link>
      </li>
      <li @click="toggleClass(2)" :class="{'active':2==current}">
        <div class="router">
          <div class="left_logo"><i class="inlineBlockIcon qiye"></i></div>
          <span class="router_title">企业管理</span>
          <i class="inlineBlockIcon jiantou"></i>
        </div>
        <ul class="zi_list">
          <li @click.stop="toggleBoxClass(2.1)" :class="{'active':2.1==BoxCurrent}">
            <router-link :to="{path: '/BusinessManagement',name:'BusinessManagement',params:{indexs: 2.1}}" class="router">
              <span class="router_title">企业管理</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(2.2)" :class="{'active':2.2==BoxCurrent}">
            <router-link :to="{path: '/PeopleManagement',name:'PeopleManagement',params:{indexs: 2.2}}" class="router">
              <span class="router_title">科技人员管理</span>
            </router-link>
          </li>
        </ul>
      </li>
      <li @click="toggleClass(3)" :class="{'active':3==current}">
        <router-link :to="{path: '/rdManagement',name: 'rdManagement', params: {ids: '3'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon yanfahuodong"></i></div>
          <span class="router_title">研发活动管理</span>
        </router-link>
      </li>
      <li @click="toggleClass(4)" :class="{'active':4==current}">
        <!--<div>研发费用管理</div>-->
        <div class="router">
          <div class="left_logo"><i class="inlineBlockIcon feiyong"></i></div>
          <span class="router_title">研发费用管理</span>
          <i class="inlineBlockIcon jiantou"></i>
        </div>
        <ul class="zi_list">
          <li @click.stop="toggleBoxClass(4.1)" :class="{'active':4.1==BoxCurrent}">
            <router-link :to="{path: '/cost_people',name:'cost_people',params:{indexs: 4.1}}" class="router">
              <span class="router_title">人员人工费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.2)" :class="{'active':4.2==BoxCurrent}">
            <router-link :to="{path: '/cost_zhijie',name:'cost_zhijie',params:{indexs: 4.2}}" class="router">
              <span class="router_title">直接投入费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.3)" :class="{'active':4.3==BoxCurrent}">
            <router-link :to="{path: '/cost_zhejiu',name:'cost_zhejiu',params:{indexs: 4.3}}" class="router">
              <span class="router_title">折旧费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.4)" :class="{'active':4.4==BoxCurrent}">
            <router-link :to="{path: '/cost_daitan',name:'cost_daitan',params:{indexs: 4.4}}" class="router">
              <span class="router_title">长期待摊费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.5)" :class="{'active':4.5==BoxCurrent}">
            <router-link :to="{path: '/cost_intangibleAssets',name:'cost_intangibleAssets',params:{indexs: 4.5}}" class="router">
              <span class="router_title">无形资产摊销</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.6)" :class="{'active':4.6==BoxCurrent}">
            <router-link :to="{path: '/cost_design',name:'cost_design',params:{indexs: 4.6}}" class="router">
              <span class="router_title">设计费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.7)" :class="{'active':4.7==BoxCurrent}">
            <router-link :to="{path: '/cost_zhuangbei',name:'cost_zhuangbei',params:{indexs: 4.7}}" class="router">
              <span class="router_title">装备调试与试用费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.8)" :class="{'active':4.8==BoxCurrent}">
            <router-link :to="{path: '/cost_weituo',name:'cost_weituo',params:{indexs: 4.8}}" class="router">
              <span class="router_title">委托研发费用</span>
            </router-link>
          </li>
          <li @click.stop="toggleBoxClass(4.9)" :class="{'active':4.9==BoxCurrent}">
            <router-link :to="{path: '/cost_other',name:'cost_other',params:{indexs: 4.9}}" class="router">
              <span class="router_title">其他费用</span>
            </router-link>
          </li>
        </ul>
      </li>
      <li @click="toggleClass(5)" :class="{'active':5==current}">
        <router-link :to="{path: '/knowledgeProperty',name:'knowledgeProperty',params:{indexs:5}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon zhishichanquan"></i></div>
          <span class="router_title">知识产权</span>
        </router-link>
      </li>
      <li @click="toggleClass(6)" :class="{'active':6==current}">
        <router-link :to="{path: '/highTechnology',name: 'highTechnology', params: {indexs: 6}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon gaoxinjishu"></i></div>
          <span class="router_title">高新技术产品服务</span>
        </router-link>
      </li>
      <li @click="toggleClass(7)" :class="{'active':7==current}">
        <router-link :to="{path: '/abilityToInnovate',name: 'abilityToInnovate', params: {indexs: 7}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon chuangxin"></i></div>
          <span class="router_title">创新能力管理</span>
        </router-link>
      </li>
      <li @click="toggleClass(10)" :class="{'active':10==current}">
        <router-link :to="{path: '/conversion',name: 'conversion', params: {ids: 'conversion'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon zhuanhua"></i></div>
          <span class="router_title">科技成果转化能力</span>
        </router-link>
      </li>
      <li @click="toggleClass(11)" :class="{'active':11==current}">
        <router-link :to="{path: '/ManagementLevel',name: 'ManagementLevel', params: {ids: 'ManagementLevel'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon kaifaguanli"></i></div>
          <span class="router_title">研究开发组织管理水平</span>
        </router-link>
      </li>
      <li @click="toggleClass(8)" :class="{'active':8==current}">
        <router-link :to="{path: '/standard',name: 'standard', params: {indexs: 'standard'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon biaozhun"></i></div>
          <span class="router_title">标准制定管理</span>
        </router-link>
      </li>
      <li @click="toggleClass(9)" :class="{'active':9==current}">
        <router-link :to="{path: '/businessGrowth',name: 'businessGrowth', params: {ids: 'businessGrowth'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon chengzhang"></i></div>
          <span class="router_title">企业成长性</span>
        </router-link>
      </li>
      <li @click="toggleClass(12)" :class="{'active':12==current}">
        <router-link :to="{path: '/auditReport',name: 'auditReport', params: {ids: 'auditReport'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon shenji"></i></div>
          <span class="router_title">审计报告</span>
        </router-link>
      </li>
      <li @click="toggleClass(13)" :class="{'active':13==current}">
        <router-link :to="{path: '/TaxReports',name: 'TaxReports', params: {ids: 'TaxReports'}}" class="router">
          <div class="left_logo"><i class="inlineBlockIcon nashui"></i></div>
          <span class="router_title">企业所得税纳税申报表</span>
        </router-link>
      </li>
      <li class="router">
          <div class="left_logo"><i class="inlineBlockIcon daochu"></i></div>
        <a class="router_title" href="http://fys.youledi.cn/index/export_zips" target="_blank">导出申报材料</a>
      </li>
      <li class="router phone">
        <div class="phoneLOGO"></div>
        <div class="phoneContentBOX">
          <span class="phoneTitle">服务热线</span>
          <span class="phoneNum">400-888-1212</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import bus from '../assets/eventBus'
  export default {
    name: 'routerLeft',
    data () {
      return {
//        routerList:[],
        current:this.$store.state.routerCurrent,
        BoxCurrent:this.$store.state.BoxCurrent
      }
    },
    mounted () {
//      console.log(this.$store.state.BoxCurrent)
//      let that = this
//      bus.$on('routes',function(data){
//        that.routerList = data
//      })
    },
    methods: {
      toggleClass (index) {
        this.current = index
        this.$store.commit('routerCurrent',index)
        this.$store.commit('BoxCurrent',0)
//        this.$store.commit('currentIndex',index)
      },
      toggleBoxClass (index) {
        this.BoxCurrent = index
        this.$store.commit('BoxCurrent',index)
//        this.$store.commit('currentIndex',index)
      }
    }
  }
</script>

<style scoped>
  @import '../assets/public.css';
  #big_box{
    width:262px;
    /*height:100vh;*/
    height:calc( 100vh - 135px );
    overflow: hidden;
    /*margin-bottom: 100px;*/
  }
  #left_router{
    height:100%;
    background-color: #F3F3F3;
    width:261px;
    border-right:1px solid #ddd;
    overflow-y: scroll;
    /*padding-bottom:10px;*/
  }
  ::-webkit-scrollbar{
    display: none;
  }
  #left_router>li{
    /*height:62px;*/
    overflow: hidden;
  }
  #left_router>li>ul{
    display: none;
  }
  #left_router>li.active>ul{
    display: block;
  }
  .left_logo{
    display: inline-block;
    width:22px;
    text-align: center;
    margin:0 25px;
  }
  .router{
    width:100%;
    /*height:100%;*/
    height:62px;
    display: flex;
    align-items: center;
    border-bottom:1px solid #ddd;
    position: relative;
    box-sizing:border-box;
    cursor: pointer;
  }
  .phone{
    align-items: flex-start;
    height:100px;
    padding-top:20px;
    padding-left:33px;
  }
  .phoneLOGO{
    display: inline-block;
    width:34px;
    height:34px;
    background-image: url("img/phone.png");
    background-size: 100% 100%;
    margin-right: 12px;
  }
  .phoneContentBOX{
    display: flex;
    flex-direction: column;
  }
  .phoneTitle{
    color: #666;
    font-size:12px;
  }
  .phoneNum{
    color:#3C7FAF;
    font-size:16px;
  }


  .router_title{
    color: #666;
    font-size:16px;
  }
  li.active>.router>.router_title{
    color: #3C7FAF;
  }
  li.active>.router{
    background-color: #D6EBFC;
  }
  .jiantou{
    width: 8px;
    height: 15px;
    background: url("img/jiantou.png");
    position: absolute;
    right:39px;
    top:50%;
    transform: translateY(-50%) rotate(0deg);
  }
  li.active .jiantou{
    transform: translateY(-50%) rotate(90deg);
  }
  .zi_list .router{
    height:46px;
    padding-left: 75px;
    color: #666;
    font-size:16px;
  }
  /****logo那些*****/
  .shouye{
    width:21px;
    height:21px;
    background: url("img/shouye2.png");
  }
  li.active .shouye{
    background: url("img/shouye1.png");
  }
  .qiye{
    width:18px;
    height:17px;
    background: url("img/qiye2.png");
  }
  li.active .qiye{
    background: url("img/qiye1.png");
  }
  .yanfahuodong{
    width:20px;
    height:20px;
    background: url("img/yanfahuodong2.png");
  }
  li.active .yanfahuodong{
    background: url("img/yanfahuodong1.png");
  }
  .feiyong{
    width:20px;
    height:20px;
    background: url("img/feiyong2.png");
  }
  li.active .feiyong{
    background: url("img/feiyong1.png");
  }
  .zhishichanquan{
    width:20px;
    height:18px;
    background: url("img/zhishichanquan2.png");
  }
  li.active .zhishichanquan{
    background: url("img/zhishichanquan1.png");
  }
  .gaoxinjishu{
    width:21px;
    height:18px;
    background: url("img/gaoxinjishu2.png");
  }
  li.active .gaoxinjishu{
    background: url("img/gaoxinjishu1.png");
  }
  .chuangxin{
    width:22px;
    height:20px;
    background: url("img/chuangxin2.png");
  }
  li.active .chuangxin{
    background: url("img/chuangxin1.png");
  }
  .biaozhun{
    width:20px;
    height:15px;
    background: url("img/biaozhun2.png");
  }
  li.active .biaozhun{
    background: url("img/biaozhun1.png");
  }
  .chengzhang{
     width:19px;
     height:16px;
     background: url("img/chengzhang2.png");
   }
  li.active .chengzhang{
    background: url("img/chengzhang1.png");
  }
  .zhuanhua{
    width:21px;
    height:20px;
    background: url("img/zhuanhua2.png");
  }
  li.active .zhuanhua{
    background: url("img/zhuanhua1.png");
  }
  .kaifaguanli{
    width:19px;
    height:19px;
    background: url("img/kaifaguanli2.png");
  }
  li.active .zhuanhua{
    background: url("img/kaifaguanli1.png");
  }
  .shenji{
    width:18px;
    height:20px;
    background: url("img/shenji2.png");
  }
  li.active .zhuanhua{
    background: url("img/shenji1.png");
  }
  .nashui{
    width:17px;
    height:16px;
    background: url("img/nashui2.png");
  }
  li.active .zhuanhua{
    background: url("img/nashui1.png");
  }
  .daochu{
    width:18px;
    height:17px;
    background: url("img/daochu2.png");
  }
  li.active .zhuanhua{
    background: url("img/daochu1.png");
  }
  /****************/
</style>
